<template>
  <div class="contain">
    <div class="head">
      <div class="img">
        <span @click="fun()"></span>
        <div class="logo">
          <img src="images/logo.png" alt="" />
        </div>
        <div class="name">
          <p>演出景点榜 华东</p>
        </div>
        <ul class="other">
          <li>
            3亿
            <p>用户真实点评</p>
          </li>
          <li>
            20年
            <p>出游数据沉淀</p>
          </li>
          <li>
            每月
            <p>动态实时更新</p>
          </li>
        </ul>
        <ul class="tab">
          <li>景点</li>
          <li>酒店</li>
          <li>美食</li>
        </ul>
        <div class="common">
          <div class="left">
            <select>
              <option>华东</option>
            </select>
          </div>
          <div class="right">
            <ul class="tit">
              <li>演出</li>
              <li>赏秋</li>
              <li>网红</li>
              <li>亲子</li>
              <li>山水</li>
              <li>乐园</li>
              <li>古镇</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Main v-for="(v,i) in newarr" :key="i" :leftpic="v.leftpic" :righttop="v.rightpic_top" :rightbottom="v.rightpic_bt"
    :name="v.name" :title="v.info" :fraction="v.score" :number="v.scnum" :type="v.type" :introduce="v.typeconent" :money="v.price"/>
  </div>
</template>

<script>
import Main from '@/components/Insurance/main.vue'
export default {
  methods: {
    fun() {
      this.$router.push("/homepage");
    },
  },
  components:{
    Main
  },
  created() {
    this.$store.dispatch("uplist");
  },
  computed:{
    newarr(){
       return this.$store.state.board.str
    }
  }
};
</script>

<style scoped>
.contain {
  background-color: #242424;
  min-height: 8rem;
}
.head {
  background: url(https://youimg1.c-ctrip.com/target/0106b120008yxgc1xD49D_D_750_560.jpg);
}
.img{
background: url(https://pages.c-ctrip.com/you/CRanking/cranking_gather_hd_bg_ad.png?v=20211118_17_03);
padding: 0.1rem 0.2rem 0;
}
.head span {
  display: block;
  background-size: 0.24rem;
  width: 0.15rem;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotateZ(45deg);
  height: 0.15rem;
  margin: 0.1rem 0;
}
.head .logo {
  height: 0.35rem;
  margin-top: 0.25rem;
  text-align: center;
}
.head .logo img {
  height: 100%;
  width: auto;
}
.name {
  margin-top: 0.1rem;
  height: 0.32rem;
  text-align: center;
  font-size: 0.18rem;
  color: #fff;
}
.other {
  margin-top: 0.15rem;
  display: flex;
  padding: 0 0.3rem;
}
.other li {
  width: 33.33%;
  height: 0.44rem;
  color: rgba(255, 226, 200, 0.9);
  font-size: 17px;
  text-align: center;
  line-height: 16px;
}
.other li p {
  margin-top: 0.05rem;
  color: #fff;
  font-size: 0.11rem;
}
.tab {
  margin-top: 0.15rem;
  height: 0.4rem;
  display: flex;
  justify-content: space-between;
}
.tab li {
  width: 31%;
  height: 0.35rem;
  text-align: center;
  background: #a27958;
  font-size: 16px;
  color: #ffe2c8;
  line-height: 0.35rem;
  border-radius: 50px;
}
.tab li:first-child {
  color: #7c512f;
  background-image: linear-gradient(90deg, #ffe5c8 0%, #dbae85 100%);
}
.common {
  height: 0.58rem;
  display: flex;
}
.common .left {
  width: 0.68rem;
  height: 0.58rem;
  padding: 0 0.12rem;
  padding-top: 0.2rem;
  text-align: center;
}
.common .left select {
  color: #fff;
  font-size: 0.18rem;
  border: none;
  padding-right: 0.12rem;
  border-right: 1px solid #ffe5c8;
  background-color: transparent;
}
.common .right {
  margin-left: 0.2rem;
  padding-top: 0.2rem;
  height: 0.58rem;
  overflow-x: auto;
}
.common .right .tit {
  display: flex;
  align-items: center;
}
.common .right li {
  width: 0.5rem;
  text-align: center;
  line-height: 0.24rem;
  flex-shrink: 0;
  background-image: linear-gradient(90deg, #ffe5c8 0%, #dbae85 100%);
  color: #7c512f;
  height: 0.24rem;
  border-radius: 0.12rem;
  margin: 0 0.08rem;
}
</style>